<template>
	<!-- 提现页面 -->
	<view class="distill">
		<view class="distill_count">
			<view class="distill_count_one">
				<view class="distill_count_oneTitle">
					提现金额
				</view>
				<view class="distill_count_oneInput">
					￥<input type="digit" @input="sr" v-model="tixianPrice" value="" />
				</view>
				<view class="distill_count_oneBottom">
					<view class="distill_count_oneBottom_left">
						提现手续费{{withdraw}}%
					</view>
					<view class="distill_count_oneBottom_left2" @click="quanbuTixian">
						全部提现
					</view>
				</view>
			</view>
			<!-- 选择支付方式 -->
			<view class="distill_count_two">
				<view class="distill_count_two_title">
					选择支付方式
				</view>
				<view class="binndZhang" v-if="zhifuArray.length">
					<!-- 绑定账号 -->
					<view class="binndZhang_one" v-for="(item,index) in zhifuArray" @click="goBind(index)">
						<!-- 微信 -->
						<view class="binndZhang_one_left">
							<image v-if="item.type==0" src="../../static/bang_wx.png" mode="aspectFill"></image> 
							<image v-if="item.type==1" src="../../static/bang_zhi.png" mode="aspectFill"></image>
							<image v-if="item.type==2" src="../../static/bang_card.png" mode="aspectFill"></image>
							{{item.type==0?'微信':item.type==1?'支付宝':item.type==2?'银行卡':''}}
						</view>
						<view class="binndZhang_one_right">
							<image v-if="zhiIndex!=index" src="../../static/xuanzhongyuandian.png" mode="aspectFill"></image>
							<image v-else src="../../static/xuanzhong.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="bangdingzhanghao" v-else>
					请绑定账号
				</view>
			</view>
			<!-- 立即提现 -->
			<view class="distill_confirm" @click="priceConfirms">
				提交
			</view>
		</view>
	</view>
</template>
<script>
	import {cardList,addTixian} from "@/common/config/request.js"
	export default{
		data(){
			return{
				zhifuArray:[],
				zhiIndex:0,
				tixianPrice:"",
				zongPrice:"",//总价格
				tixianfangshiId:0,
				withdraw:"",
			}
		},
		onLoad(option){
			this.zongPrice=option.moeney
			this.withdraw=option.withdraw
			this.getTixian()
		},
		methods:{
			sr(e){
				console.log(e)
				// return false
				var value=e.detail.value
		 		this.$nextTick(()=> {
		 			this.tixianPrice = value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')
		 		})
				// this.tixianPrice

				// let t=/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/ //正数（包括小数)
				// var value = this.tixianPrice;
				// 	if(!value || value == " "){
				// 	return '';
				// 	}
				// 	const rule = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
				// 	// if(!rule.test(value)){
				// 		this.$nextTick(()=> {
				// 			this.tixianPrice = value.replace(rule,'');
				// 		})
					// }
					
			},
			quanbuTixian(){
				this.tixianPrice=this.zongPrice
			},
			getTixian(){
				cardList({}).then(res=>{
					if(res.data.code==1){
						// console.log(res.data.data,'银行卡列表')
					    this.zhifuArray=res.data.data
						this.tixianfangshiId=res.data.data[0].id
					}
				})
			},
			// 选择方式
			goBind(index){
				console.log(this.zhifuArray[index])
				this.zhiIndex=index
				this.tixianfangshiId=this.zhifuArray[index].id
			},
			// 提交
			priceConfirms(){
				if(+this.tixianPrice>this.zongPrice){
					uni.showToast({
						icon:'none',
						title:'提前金额不能大于总金额'
					})
				}else{
					if(this.tixianPrice<=0){
						return uni.showToast({
							icon:'none',
							title:'提前金额不能为0'
						})
					}
					// console.log(this.tixianfangshiId)
					let data={
						account_id:this.tixianfangshiId,
						predict_price:this.tixianPrice
					}
					addTixian(data).then(res=>{
						if(res.data.code==1){
							uni.showToast({
								icon:'none',
								title:'提交成功'
							})
							setTimeout(()=>{
								uni.navigateBack({
									
								})
							},1500)
						}
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.distill{
		width: 750rpx;
		min-height: 100vh;
		background-color: #F3F4F5;
		box-sizing: border-box;
		padding: 20rpx  20rpx 0;
		.distill_count{
			.distill_count_one{
				width: 710rpx;
				height: 224rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				.distill_count_oneTitle{
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 42rpx;
					color: #333333;
					margin-left: 20rpx;
					padding-top: 20rpx;
				}
				.distill_count_oneInput{
					width: 90%;
					height: 60rpx;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #CCCCCC;
					margin: 20rpx auto 0;
					input{
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}
				.distill_count_oneBottom{
					width: 100%;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.distill_count_oneBottom_left{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-left: 30rpx;
					}
					.distill_count_oneBottom_left2{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FA9700;
						margin-right: 30rpx;
					}
				}
			}
			.distill_count_two{
				width: 710rpx;
				height: 427rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding-top: 20rpx;
				margin-top: 40rpx;
				.distill_count_two_title{
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 42rpx;
					color: #333333;
					margin-left: 20rpx;
				}
				.binndZhang{
					width: 710rpx;
					margin-top: 30rpx;
					.binndZhang_one{
						width: 710rpx;
						height: 100rpx;
						border-bottom: 1rpx solid #E6E6E6;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.binndZhang_one_left{
							image{
								width: 60rpx;
								height: 60rpx;
								display: inline-block;
								vertical-align: middle;
								margin-right: 28rpx;
							}
							font-size: 32rpx;
							font-weight: 600;
							margin-left: 30rpx;
						}
						.binndZhang_one_right{
							image{
								width: 44rpx;
								height: 44rpx;
							}
							margin-right: 30rpx;
						}
					}
				}
			 
			      .bangdingzhanghao{
					  font-size: 30rpx;
					  color: #CCCCCC;
					  margin-top: 40rpx;
					  margin-left: 30rpx;
				  }
			
			}
		
		    .distill_confirm{
				width: 710rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background:#FA9700;
				border-radius: 100rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin-top: 142rpx;
			}
		
		}
	}
</style>